import { GetUserInfo } from '@/api/user';
import useCustomerService from '@/components/useCustomerService';
import { Image, Text, View } from '@tarojs/components';
import Taro, { useDidShow } from '@tarojs/taro';
import { useRequest } from 'taro-hooks';

const DEFAULT_AVATAR =
  'https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/default-avatar.jpg';

export default function Index() {
  const { data: user, refresh } = useRequest(GetUserInfo);
  const { renderNode: renderServiceNode, open: openService } =
    useCustomerService();

  useDidShow(() => refresh());

  return (
    <>
      <View
        className=' text-white text-[24px] min-h-screen bg-cover bg-center pt-[130px]'
        style={{
          backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/my-bg.jpg)`,
        }}
      >
        <View className=' flex px-4 mb-4'>
          <Image
            src={user?.headimg || DEFAULT_AVATAR}
            mode='aspectFill'
            className=' w-[160px] h-[160px] rounded-full bg-white border-solid border-[6px] border-white shadow-lg mr-5'
          />
          <View
            className=' flex-1'
            onClick={() => {
              Taro.navigateTo({
                url: `/pages/login/role`,
              });
            }}
          >
            <Text className=' text-xl font-bold text-black block mt-[40px]'>
              Hello, {user?.name}
            </Text>

            {user?.company && (
              <View className='py-1 px-3 mt-2 text-[#F2A922] text-xs bg-[rgba(255,255,255,.6)] inline-block rounded-full'>
                <View
                  className='w-[24px] h-[24px] bg-cover inline-block mr-1 translate-y-[3px]'
                  style={{
                    backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/icon-vip.svg)`,
                  }}
                ></View>
                {user?.company}
              </View>
            )}
          </View>
        </View>

        {/* 我的积分 */}
        <View
          onClick={() => {
            Taro.navigateTo({
              url: `/pages/my/integral/index`,
            });
          }}
          className=' h-[218px]  bg-cover text-black flex items-end pl-[40px] font-bold pb-[120px] leading-none'
          style={{
            backgroundImage: `url(https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/expert-1.png)`,
          }}
        >
          <Text className=' block text-lg'>积分</Text>
          <Text className=' text-[60px] ml-4  translate-y-[8px]'>
            {user?.points || 0}
          </Text>
        </View>

        <View className='rounded-lg bg-white py-5 mx-[20px] relative grid grid-cols-4'>
          <View
            className='text-center'
            onClick={() => {
              Taro.navigateTo({ url: `/pages/my/invite/index` });
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/partner-icon-inv.svg'
              className='w-[44px] h-[44px] block mx-auto mb-2'
            />
            <Text className=' text-xs text-black'>邀请好友</Text>
          </View>

          <View
            className='text-center'
            onClick={() => {
              openService();
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/partner-icon-contact.svg'
              className='w-[44px] h-[44px] block mx-auto mb-2'
            />
            <Text className=' text-xs text-black'>平台客服</Text>
          </View>

          <View
            className='text-center'
            onClick={() => {
              Taro.navigateTo({ url: `/pages/my/set/index` });
            }}
          >
            <Image
              src='https://applets-1302975996.cos.ap-nanjing.myqcloud.com/zhb/user-other-3.svg'
              className='w-[44px] h-[44px] block mx-auto mb-2'
            />
            <Text className=' text-xs text-black'>设置中心</Text>
          </View>
        </View>
      </View>

      {renderServiceNode()}
    </>
  );
}
